<template>
  <div id="visualData8">
    <div class="gradient-divider">
      初烤烟叶的化学成分分析 WT202508013系列
    </div>
    <div id="FruChart"></div>
  </div>

</template>
<script>
import * as echarts from 'echarts'
export default {
  name: "visualData8",
  data() {
    return {
      categories: [
        "03", "04", "05", "06",
        "07", "08", "09", "10",
        "11", "12", "13", "14",
        "15", "16", "17", "18"
      ],
      seriesData: {
        FruAmb: [2665, 2565, 2695, 2477, 2419, 2711, 2293, 2473, 2348, 2500, 2248, 2635, 2220, 2631, 2508, 2725],
        FruPro: [8508, 7417, 8379, 7004, 7556, 5967, 7792, 5328, 7890, 6823, 7553, 6647, 7458, 6666, 8297, 8255],
        FruAla: [1963, 1869, 2043, 1830, 1917, 1874, 1856, 1615, 2065, 1919, 1994, 1858, 1863, 1902, 2074, 2280],
        FruAsn: [2942, 3505, 3021, 2405, 2640, 2916, 2756, 2906, 1937, 2503, 2022, 2853, 1777, 1706, 2060, 2064]
      }
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById('FruChart'));
      chart.setOption({
        grid: { left: '10%', right: '10%', top: '10%', bottom: '25%' },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        legend: {
          data: ['Fru-Amb', 'Fru-Pro', 'Fru-Ala', 'Fru-Asn'],
          textStyle: { color: "#fff" },
          bottom: '5%',
        },
        xAxis: {
          type: 'category',
          data: this.categories,
          axisLabel: { color: '#fff' }
        },
        yAxis: {
          type: 'value',
          axisLabel: { color: '#fff' },
          splitLine: { show: false }
        },
        series: [
          {
            name: 'Fru-Amb',
            type: 'bar',
            data: this.seriesData.FruAmb,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#a0f5e1' },
                { offset: 1, color: '#00bfae' }
              ])
            }
          },
          {
            name: 'Fru-Pro',
            type: 'bar',
            data: this.seriesData.FruPro,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#8dbff5' },
                { offset: 1, color: '#0083b5' }
              ])
            }
          },
          {
            name: 'Fru-Ala',
            type: 'bar',
            data: this.seriesData.FruAla,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#6de5cb' },
                { offset: 1, color: '#009f7e' }
              ])
            }
          },
          {
            name: 'Fru-Asn',
            type: 'bar',
            data: this.seriesData.FruAsn,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#a0d7f5' },
                { offset: 1, color: '#009cd1' }
              ])
            }
          }
        ]
      });
    }
  }
};

</script>

<style scoped lang="scss">
#visualData8 {
  padding: 0 .2em;
}

#FruChart {
  height: 220px;
  width: 100%;
}

.gradient-divider {
  display: flex; // 启用flex布局
  align-items: center; // 垂直居中
  // justify-content: center; // 水平居中（如果需要）
  height: 28px;
  font-size: 17px;
  font-weight: bold;
  border-radius: 3px;
  color: #f3f1f1;
  background: linear-gradient(to right, rgb(24, 115, 164) 0%, transparent);
  //margin-bottom: 5px;
  padding: 0 10px;
}
</style>
